<template>
  <edit-dialog :centerDialogVisible="visible" :info="info" :tilte="tilte" :width="width" :default-button="false"
    @Cancel="Cancel">
    <template #content>
      <div>
        <div class="title-row">
          <div class="title-line"></div>
          <div class="title">流程追踪</div>
        </div>
        <div>
          <el-steps :active="active" style="overflow-y: auto;">
            <template v-for="(item, index) in processNodeList" :key="index">
              <el-step :title="index+' 捡拾-' + item.nodeName" v-if="index == 0">
                <template #description>
                  <div>{{ dayjs(item.nodeTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                  <div>T3航站楼值班柜台</div>
                  <div>{{ item.nodeUserName }} 登记</div>
                </template>
              </el-step>
              <el-step :title="index+' '+item.nodeName" v-else>
                <template #description>
                  <div>{{ dayjs(item.nodeTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                  <div>T3航站楼值班柜台</div>
                  <div>{{ item.nodeUserName }} 登记</div>
                </template>
              </el-step>
            </template>
          </el-steps>
        </div>
      </div>
      <div class="goods-info">
        <div>
          <div class="title-row">
            <div class="title-line"></div>
            <div class="title">物品信息</div>
          </div>
        </div>
        <div class="info-content">
          <div class="col-1">
            <!-- <div class="attribute-row">
              <img
                :src="goodsObject.goodsFiles ? goodsObject.goodsFiles[0]?.resourceAddress : image.noImg" alt="物品信息" />
            </div> -->
            <div class="image-box">
              <img v-if="!goodsObject.goodsFiles" class="content_img" :src="image.noImg" />
              <div class="image-box-top" v-else>
                <el-icon size="30px" class="image-box-top-icon" @click="changeImage('left')"
                  :style="{ cursor: imageInfo.imageIndex === 0 ? 'not-allowed' : 'pointer' }" v-if="imageInfo.imgLen > 1">
                  <ArrowLeftBold />
                </el-icon>
                <img :src="imageInfo.imgArr[imageInfo.imageIndex]" class="content_img"
                  @click="handlePicPreview(imageInfo.imgArr[imageInfo.imageIndex])" />
                <el-icon size="30px" class="image-box-top-icon" @click="changeImage('right')"
                  :style="{ cursor: imageInfo.imageIndex === imageInfo.imgLen - 1 ? 'not-allowed' : 'pointer' }"
                  v-if="imageInfo.imgLen > 1">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <div class="image-box-bottm" v-show="imageInfo.imgLen > 1">
                <img v-for="(item, index) in imageInfo.imgArr" @click="imageInfo.imageIndex = index" :src="item" :key="item"
                  :style="{ border: imageInfo.imageIndex === index ? '1px solid #555df8' : '1px solid transparent' }">
              </div>
            </div>
          </div>
          <div class="col-2">
            <div class="attribute-row">
              <label>物品名称：</label>
              <span>{{ goodsObject.goodsName }}</span>
            </div>
            <div class="attribute-row">
              <label>物品编号：</label>
              <span>{{ goodsObject.goodsCode }}</span>
            </div>
            <div class="attribute-row">
              <label>保质期：</label>
              <span>{{ goodsObject.timeLimit }}{{ goodsObject.timeLimitUnit == 'Y' ? '年' : goodsObject.timeLimitUnit == 'H' ? '小时' : goodsObject.timeLimitUnit == 'D' ? '天' : '' }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾人姓名：</label>
              <span>{{ goodsObject.pickUpName }}</span>
            </div>
            <div class="attribute-row">
              <label>航站楼【捡拾】：</label>
              <span>{{ goodsObject.pickUpTerminal }}</span>
            </div>
            <div class="attribute-row">
              <label>航站楼【存放】：</label>
              <span>{{ goodsObject.depositTerminal }}</span>
            </div>
            <div class="attribute-row">
              <label>登记人：</label>
              <span>{{ goodsObject.creator.name }}</span>
            </div>
          </div>
          <div class="col-3">
            <div class="attribute-row">
              <label>物品类型：</label>
              <span>{{ getGoodsTypeName(goodsObject.goodsType) }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾日期：</label>
              <span>{{ goodsObject.pickUpTime ? dayjs(goodsObject.pickUpTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
            </div>
            <div class="attribute-row">
              <label>物品时效：</label>
              <span>{{ goodsObject.goodsLimitTime ? dayjs(goodsObject.goodsLimitTime).format('YYYY-MM-DD HH:mm:ss') : ''
              }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾人电话：</label>
              <span>{{ goodsObject.pickUpPhone }}</span>
            </div>
            <div class="attribute-row">
              <label>捡拾地：</label>
              <span>{{ goodsObject.pickUpPlace }}</span>
            </div>
            <div class="attribute-row">
              <label>存放地：</label>
              <span>{{ getDepositPlaceName(goodsObject.depositPlace) }}</span>
            </div>
            <div class="attribute-row">
              <label>登记时间：</label>
              <span>{{ goodsObject.createTime ? dayjs(goodsObject.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-info">
        <div class="title-row">
          <div class="title-line"></div>
          <div class="title">领取信息</div>
        </div>
        <div class="get-info-content">
          <div class="get-info-row-1">
            <div class="attribute-row-30">
              <label>领取人姓名：</label>
              <span>{{ receiveData.receiveName }}</span>
            </div>
            <div class="attribute-row-30">
              <label>领取人证件号：</label>
              <span>{{ receiveData.receiveNo }}</span>
            </div>
            <div class="attribute-row-30">
              <label>领取人电话：</label>
              <span>{{ receiveData.receivePhone }}</span>
            </div>
          </div>
          <div class="get-info-row-2">
            <div class="attribute-row-30">
              <label>领取时间：</label>
              <span>{{ receiveData.receiveTime ? dayjs(receiveData.receiveTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
            </div>
            <div class="attribute-row-70">
              <label>备注：</label>
              <span>{{ receiveData.remarks }}</span>
            </div>
          </div>
          <div class="get-info-row-3">
            <div class="attribute-row-30">
              <label>登记人：</label>
              <span>{{ receiveData.creator.name }}</span>
            </div>
            <div class="attribute-row-70">
              <label>记录时间：</label>
              <span>{{ receiveData.createTime ? dayjs(receiveData.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template #custom>
      <span class="dialog-footer">
        <el-button @click="Cancel">关闭</el-button>
      </span>
    </template>
  </edit-dialog>
  <el-dialog v-model="dialogVisible" width="auto" align-center center>
    <img :src="dialogImageUrl"/>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, watch, reactive, computed } from 'vue'
import editDialog from '@/components/editDialog/index.vue'
import { pickUpGoodsDetail } from '@/api/lose/goodsReg'
import { cloneDeep, merge } from 'lodash'
import { dayjs } from 'element-plus'
import { image } from '@/assets/index'
import { getGoodsTypeName, getDepositPlaceName } from '@/utils/common'
const tilte = ref('查看捡拾物品')
const width = ref('70%')
const active = ref(1)
const regId = computed(() => props.info.regId)
const taskId = computed(() => props.info.taskId)
const dialogImageUrl = ref('') // 图片地址
const dialogVisible = ref(false) // 图片预览弹窗
const emit = defineEmits(['cancel'])
interface GoodsDataFace {
  regId: string
  goodsName: string
  goodsType: string
  goodsCode: number
  pickUpTime: string
  timeLimit: string
  timeLimitUnit: string
  goodsLimitTime: string
  pickUpName: string
  pickUpPhone: string
  pickUpTerminal: string
  pickUpPlace: string
  depositTerminal: string
  depositPlace: string
  goodsFiles?: Array<{
    enclosureContent: string
    enclosureName: string
    enclosureSuffix: string
    resourceAddress: string
    enclosureCode: string
  }>,
  creator: {
    id: string
    name: string
  }
  createTime?: string
  taskProcess: string
}
interface ReceiveDataFace {
  receiveId: number
  receiveName: string
  receiveNo: string
  receivePhone: string
  receiveTime: string
  remarks: string
  createTime: string
  creator: {
    id: string
    name: string
  }
}

interface NodeFace {
  nodeName: string
  nodeTime: string
  nodeUserName: string
}

const processNodeList = ref<Array<NodeFace>>([{
  nodeName: '',
  nodeTime: '',
  nodeUserName: ''
}])

const initGoodsObject = {
  regId: '',
  goodsName: '',
  goodsType: '',
  goodsCode: 0,
  pickUpTime: '',
  timeLimit: '',
  timeLimitUnit: '',
  goodsLimitTime: '',
  pickUpName: '',
  pickUpPhone: '',
  pickUpTerminal: '',
  pickUpPlace: '',
  depositTerminal: '',
  depositPlace: '',
  goodsFiles: [],
  creator: {
    id: '',
    name: ''
  },
  createTime: '',
  taskProcess: ''
}

const goodsObject = reactive<GoodsDataFace>(cloneDeep(initGoodsObject))

const initReceiveData = {
  receiveId: 0,
  receiveName: '',
  receiveNo: '',
  receivePhone: '',
  receiveTime: '',
  remarks: '',
  createTime: '',
  creator: {
    id: '',
    name: ''
  }
}
const imageInfo = reactive({
  imageIndex: 0,
  imgArr: [],
  imgLen: 0
})
const receiveData = reactive<ReceiveDataFace>(cloneDeep(initReceiveData))
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object,
    default: () => null
  }
})

const Cancel = () => {
  emit('cancel')
}

/**
* 切换显示图片
*/
const changeImage = (value: string) => {
  if ((value === 'left' && imageInfo.imageIndex === 0) || (value === 'right' && imageInfo.imageIndex === imageInfo.imgLen - 1)) {
    return
  }
  if (value === 'left') {
    imageInfo.imageIndex = imageInfo.imageIndex - 1
  } else {
    imageInfo.imageIndex = imageInfo.imageIndex + 1
  }
}

/**
* 预览图片
*/
const handlePicPreview = (url: string) => {
  dialogImageUrl.value = url
  dialogVisible.value = true
}
interface FileDataType {
  enclosureContent: string,
  enclosureName: string,
  enclosureSuffix: string,
  resourceAddress: string,
  enclosureCode: string,
}
const getPickUpGoodsDetail = () => {
  Object.assign(goodsObject, initGoodsObject)
  Object.assign(receiveData, initReceiveData)
  processNodeList.value = []
  const params = {
    regId: regId.value,
    taskId: taskId.value
  }
  pickUpGoodsDetail(params).then(res => {
    if (res.data) {
      merge(goodsObject, res.data.goodsData)
      merge(receiveData, res.data.receiveData)
      processNodeList.value = res.data.list
      processNodeList.value.reverse()
      active.value = res.data.list.length
      const newImgArr: Array<string> = []
      if (res?.data?.goodsData?.goodsFiles?.length) {
        res.data.goodsData.goodsFiles.forEach((ele: FileDataType) => {
          ele.resourceAddress && (newImgArr.push(ele.resourceAddress))
        })
      }
      imageInfo.imgArr = newImgArr
      imageInfo.imageIndex = 0
      imageInfo.imgLen = newImgArr.length
    }
  })
}
watch(() => props.visible, (val: boolean, oldVal: boolean) => {
  if (val) {
    getPickUpGoodsDetail()
  }
})
</script>

<style lang="less" scoped>

/deep/.el-dialog__body {
  padding: 20px;
}
/deep/.el-dialog__title {
  line-height: 0;
}
.title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  .title-line {
    height: 12px;
    background-color: #337ECA;
    width: 2px;
    margin-top: 2px;
  }
  .title {
    color: #353a42;
    font-size: 16px;
    margin-left: 10px;
  }
}
/deep/ .el-step {
  margin-top: 10px;
  .el-step__title {
    position: absolute;
    top: -10px;
    color: black;
    width: 150px;
  }
  .el-step__main {
    width: 150px;
  }
  .el-step__description {
    margin-top: 10px;
    color: #AAA;
  }
  .el-step__line {
    background-color: #337FCC;
    // width: 80%;
    // margin-left:14.8%;
  }
  .el-step__icon {
    background-color: #337FCC;
    border: none;
    .el-step__icon-inner {
      visibility: hidden;
    }
  }
}
/deep/.el-steps .el-step .el-step__head {
  margin-top: 30px;
}
.goods-info {
  margin-top: 20px;
  .info-content {
    margin-top: 10px;
    line-height: 35px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    .attribute-row img {
      width: 80%;
      border-radius: 15px;
      height: 250px;
    }
    .col-1 {
      width: 30%;
      .image-box {
        user-select: none;
        .content_img {
          width: 240px;
          height: 180px;
          cursor: pointer;
        }
        .image-box-top {
          display: flex;
          align-items: center;

        }
        .image-box-bottm {
          width: 300px;
          align-items: center;
          margin-top: 10px;
          text-align: center;
          >img {
            width: 50px;
            height: 30px;
            cursor: pointer;
            margin: 0 5px;
            padding: 3px;
          }
        }
      }
    }
    .col-2 {
      width: 25%;
    }
    .col-3 {
      width: 40%;
    }
    .attribute-row {
      width: 100%;
    }
    .attribute-row label {
      width: 130px;
      display: inline-block;
      color: #989daa;
      font-size: 14px;
      text-align: right;
    }
    .attribute-row span {
      color: #535862;
    }
  }
  .get-info-content {
    line-height: 40px;
    margin-top: 10px;
    .get-info-row-1,
    .get-info-row-2,
    .get-info-row-3 {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }
    .attribute-row-30 {
      width: 30%;
    }
    .attribute-row-70 {
      width: 60%;
    }
    .attribute-row-30 label,
    .attribute-row-70 label {
      width: 100px;
      display: inline-block;
      color: #989daa;
      font-size: 14px;
      text-align: right;
    }
    .attribute-row-30 span,
    .attribute-row-70 span {
      color: #535862;
    }
  }
}
</style>
